//展示商品类表
let username = localStorage.getItem('username')
let token = localStorage.getItem('token')
let uid = localStorage.getItem('uid')
$.ajax({
	url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
	data: {
		uid
	}
}).then(res => {
	console.log(res.data)
	let arr = res.data
	let html = ''
	for (let i = 0; i < 5; i++) {
		let pobj = arr[i]
		html +=
			`
			<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
				<img src="${pobj.pimg}">
				<p>${pobj.pname}</p>
				<span style="color: red;">￥${pobj.pprice}</span>
			</li>
			`
	}
	$('.pList').html(html)
})

//点击跳转到详情
function plistItem(id) {
	open('xiangqing.html?pid=' + id)
}


//
























// 导航栏 移入移出
$('#ssss').hover(function() {
	$('.xiala').css({
		display: "block"
	})
}, function() {
	$('.xiala').css({
		display: "none"
	})
})

$('.xiala').hover(function() {
	$('.xiala').css({
		display: "block"
	})
}, function() {
	$('.xiala').css({
		display: "none"
	})
})


// // 


$('.pinpai1 span').hover(function() {
	$('.pinpai1 span').css({
		background: '#fff'
	})
	$('.pinpai1 p').css({
		background: '#ccc'
	})
	$('.cs2').css({
		display: "none"
	})
	$('.cs1').css({
		display: "block"
	})
})

$('.pinpai1 p').hover(function() {
	$('.pinpai1 p').css({
		background: '#fff'
	})
	$('.pinpai1 span').css({
		background: '#ccc'
	})
	$('.cs1').css({
		display: "none"
	})
	$('.cs2').css({
		display: "block"
	})
})
//

$('.dao').hover(function() {
	$('.rrr').css({
		display: "block"
	})
}, function() {
	$('.rrr').css({
		display: "none"
	})
})

$('.rrr').hover(function() {
	$('.rrr').css({
		display: "block"
	})
}, function() {
	$('.rrr').css({
		display: "none"
	})
})
//
$('#caoo1').hover(function() {
	$('.tule1').css({
		display: "block"
	})
}, function() {
	$('.tule1').css({
		display: "none"
	})
})

$('.tule1').hover(function() {
	$('.tule1').css({
		display: "block"
	})
}, function() {
	$('.tule1').css({
		display: "none"
	})
})

$('#caoo2').hover(function() {
	$('.tule2').css({
		display: "block"
	})
}, function() {
	$('.tule2').css({
		display: "none"
	})
})

$('.tule2').hover(function() {
	$('.tule2').css({
		display: "block"
	})
}, function() {
	$('.tule2').css({
		display: "none"
	})
})
$('#caoo3').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})

$('.tule3').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})
$('#caoo4').hover(function() {
	$('.tule4').css({
		display: "block"
	})
}, function() {
	$('.tule4').css({
		display: "none"
	})
})

$('.tule4').hover(function() {
	$('.tule4').css({
		display: "block"
	})
}, function() {
	$('.tule4').css({
		display: "none"
	})
})

$('#caoo5').hover(function() {
	$('.tule5').css({
		display: "block"
	})
}, function() {
	$('.tule5').css({
		display: "none"
	})
})

$('.tule5').hover(function() {
	$('.tule5').css({
		display: "block"
	})
}, function() {
	$('.tule5').css({
		display: "none"
	})
})
$('#caoo6').hover(function() {
	$('.tule6').css({
		display: "block"
	})
}, function() {
	$('.tule6').css({
		display: "none"
	})
})

$('.tule6').hover(function() {
	$('.tule6').css({
		display: "block"
	})
}, function() {
	$('.tule6').css({
		display: "none"
	})
})
$('#caoo7').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})

$('.tule3').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})
$('#caoo8').hover(function() {
	$('.tule5').css({
		display: "block"
	})
}, function() {
	$('.tule5').css({
		display: "none"
	})
})

$('.tule5').hover(function() {
	$('.tule5').css({
		display: "block"
	})
}, function() {
	$('.tule5').css({
		display: "none"
	})
})
$('#caoo9').hover(function() {
	$('.tule2').css({
		display: "block"
	})
}, function() {
	$('.tule2').css({
		display: "none"
	})
})

$('.tule2').hover(function() {
	$('.tule2').css({
		display: "block"
	})
}, function() {
	$('.tule2').css({
		display: "none"
	})
})

$('#caoo10').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})

$('.tule3').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})

//
$(function() {

	let flag = true;
	$(window).scroll(function() {
		if (flag) {
			let st = $(this).scrollTop();
			// console.log(st);
			// console.log($(this).index())
			if (st > 500) {
				$("#floorNav").fadeIn();
			} else {
				$("#floorNav").fadeOut();
			}

			$(".titi").each(function(i, v) {


				if (st >= $(this).offset().top - $(this).outerHeight() / 2) {
					// console.log($(this).offset().top)

					$("#floorNav li").eq(i).addClass("hover").siblings().removeClass("hover");
					console.log()
				}


			})

		}

	})


	$('#floorNav li:not(:last)').click(function() {
		flag = false;

		let index = $(this).index();
		// console.log(index)

		$(window).scrollTop($(".titi").eq(index).offset().top);

		$("#floorNav li").eq(index).addClass("hover").siblings().removeClass("hover");

		$('body,html').stop().animate({
			"scrollTop": $(".titi").eq(index).offset().top
		}, 800, function() {
			flag = true;
		});


	})

	$("#floorNav li:last").click(function() {
		$(window).scrollTop();
	})


})

